<template>
  <div>
    <table>
      <tr>
        <td>id</td>
        <td>名称</td>
        <td>分类</td>
      </tr>
      <tr v-for="i in shop">
        <td>{{ i.id }}</td>
        <td>{{ i.name }}</td>
        <td>
          <button @click="changecid(i.cid)">{{ i.cname }}</button>
        </td>
      </tr>
      <tr>
        <td>
          <van-pagination
            v-model="page"
            :total-items="total"
            :items-per-page="size"
            @change="getshop"
          />
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shop: [],
      size: 2,
      total: 0,
      page: 1,
      cid:0
    };
  },
  methods: {
    getshop(i) {
      this.page = i;
      this.$axios
        .get("/goods/goods?page=" + i + "&size=" + this.size+'&cid='+this.cid)
        .then((res) => {
          this.shop = res.data.list;
          this.total = res.data.total;
        });
    },
    changecid(cid){
        this.cid=cid
        this.getshop(1)

    }
  },
  mounted() {
    this.getshop(1);
  },
};
</script>

<style scoped>
</style>